import React from 'react';
import {inject, observer} from 'mobx-react';
import {Row, Col} from 'antd';
import {
  WeaNewScroll,
  WeaSearchGroup,
  WeaFormItem,
  WeaBrowser,
  WeaSelect,
  WeaLocaleProvider
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@inject ('planReportDiagramStore')
@observer
export default class MoreSearch extends React.Component {
  constructor (props) {
    super (props);
    this.state = { 
      includeSubOption:[
      {
        key:"3",
        showname:getLabel('508780','含子分部') 
      },
      {
        key:"1",
        showname:getLabel('18919','仅本分部') 
      },
      {
        key:"2",
        showname:getLabel('18920','仅子分部') 
      },
    ],
    includeDepOption:[

      {
        key:"3",
        showname:getLabel('508784','含子部门') 
      },
      {
        key:"1",
        showname:getLabel('18916','仅本部门') 
      },
      {
        key:"2",
        showname:getLabel('18917','仅子部门') 
      },
    ]};
    this.store = this.props.planReportDiagramStore;
  }

  initConditionItems = () => {
    let {moreSearchValues} = this.store;
    let _this = this;
    let searchConditionItems = [];

    searchConditionItems.push ({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@duha0k@hrmIds`} label={getLabel('30042','人员')} ratio1to2>
          <div className="hrm">
            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@434vus@hrmIds`}
              type={17}
              title={getLabel('30042','人员')}

              style={{display: 'block'}}
              isSingle={false}
              value={moreSearchValues.hrmIds}
              onChange={e => _this.onValueChange ('hrmIds', e)}
            />
          </div>
        </WeaFormItem>
      ),
    });

    searchConditionItems.push ({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7y6xu5@subtype`} label={getLabel('33553','分部')} ratio1to2>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@aign66@subtype`}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@k0bq86@subtype`} md={12}>
              <div className="left-col">
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@klt5hh@subtype`}
                  hasBorder
                  options={this.state.includeSubOption}
                  value={moreSearchValues.subType}
                  onChange={e => _this.onValueChange ('subType', e)}
                />

              </div>
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5byik4@subdata`} md={12}>
              <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@46g6zw@subdata`}
                type={194}
                title={getLabel('33553','分部')}
                isSingle={false}
                value={moreSearchValues.sub}
                onChange={e => _this.onValueChange ('sub', e)}
              />
            </Col>

          </Row>

        </WeaFormItem>
      ),
    });

    searchConditionItems.push ({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@hcesti@depttype`} label={getLabel('27511','部门')} ratio1to2>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cdl8qa@depttype`} md={12}>
            <div className="left-col">
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@mid0dj@depttype`}
                hasBorder
                options={this.state.includeDepOption}
                value={moreSearchValues.depType}
                onChange={e => _this.onValueChange ('depType', e)}
              />
            </div>
          </Col>

          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7yxoty@deptdata`} md={12}>
            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@jyw77z@deptdata`}
              type={57}
              isSingle={false}
              title={getLabel('27511','部门')}

              value={moreSearchValues.dep}
              onChange={e => _this.onValueChange ('dep', e)}
            />
          </Col>

        </WeaFormItem>
      ),
    });

    return this.store.selectTabKey == 1 ? searchConditionItems : [];
  };

  onValueChange = (paramName, e) => {
    this.store.onMoreSearchChange (paramName, e);
  };

  render () {
    return (
      <div className="condition-search-container">
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@iiq6am`} height={300}>
          <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ft7sji`}
            title={getLabel('32905','常用条件')}
            items={this.initConditionItems ()}
            showGroup={true}
            col={2}
          />

        </WeaNewScroll>
      </div>
    );
  }
}
